/**
 * @author 阮中楠
 * @description
 * 粘性定位表格头 混入对象
 *
 * 这个对象是要被混入到表格组件的vue组件，目的是为了实现表格头部的粘性定位
 * 事实上并不是真的让表格组件应用上粘性定位 而是让表格看起来像是粘性定位
 *
 * 参考资料：
 * https://blog.csdn.net/weixin_45440813/article/details/118681806
 * https://blog.csdn.net/woshisangsang/article/details/112776168
 * https://wintc.top/article/54
 */
const StickyTableHeader = {
  data() {
    return {
      /** 表格组件容器的 refs 名称
       * 这是针对与表格组件容器的ref，不是指代表格组件
       * 这个名称目前在组件内是写死的，未来可能会考虑迁移重构成一个固定配置。
       */
      tableRefname: "thisTable",

      // 预设值
      toTop: 100,

      /** 表格的dom元素 该元素等待被一次性读取并使用 */
      tableDom: null,
    };
  },

  computed: {
    /** app-container 类容器的高度 来自于Vuex储存的变量值 */
    appContainerHeight() {
      return this.$store.state.homePageStyleControl.appContainerHeight;
    },

    // 602 固定高度 来自于app-container实际有效的距离值 该值需要实现成动态取值 目前本页面是写死的
    // 20 底部的边距 即表格组件的底部边距
    // 32 分页栏的高度 分页栏组件的高度
    // 10 微调用的值 可以写死

    // 截止目前 该值是一个固定的，写死的值，并不是一个动态变化的值了。
    tableHeight() {
      return this.appContainerHeight - this.toTop - 32;
    },
  },

  watch: {
    tableData: {
      deep: true,
      immediate: true,
      handler(newVal) {
        /** 调整逻辑
         * 组件完成渲染
         * 存在有意义的可渲染数据，就重新设置表格的高度
         */
        if (this.mounted && newVal.length) {
          // this.resetToTop();
        }
      },
    },
  },

  methods: {
    /** ? TODO: 尝试监听滚动条到底部的事件， 然后执行数据更新。
     * 目前的新思路；
     * 不再重新计算高度了，该函数事实上被废弃了
     */
    resetToTop() {
      this.toTop = this.$refs[this.tableRefname].offsetTop;
    },
  },

  mounted() {
    // 做一次距离值的重设 需要在dom元素渲染完成后才能取值
    // this.resetToTop();
  },
};

export default StickyTableHeader;
